<?xml version='1.0' encoding='UTF-8' ?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:c="http://java.sun.com/jsp/jstl/core"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                template="/WEB-INF/facelets/template.xhtml">
    <ui:param name="title" value="Manage categories" />
    <ui:define name="scripts">
	<script type="text/javascript" src="res/collapsable.js"></script>
    </ui:define>
    <ui:define name="content">
        <h1>Manage category</h1>
        <h:form>
            <div>
                <h:outputLabel value="Category title" /><br />
                <h:inputText styleClass="widthenedText" value="#{newCat.catTitle}" />
                <br />

		<fieldset class="indented">
		    <legend><h3>Questions</h3></legend>
		    <div id="collapsable"></div>
		    <h:panelGroup layout="block" id="addQPanel">
			<div id="collapsee">
			    <h:panelGroup id="questionsList" layout="block">
				<p:dataList var="q" rendered="#{newCat.questions.size() != 0}" value="#{newCat.questions}">
				    <p:column>
					<div class="somewhatPadded">#{q.title}</div>

					<p:dataList styleClass="padded" var="a"
						    value="#{q.alternatives}" rendered="#{q.alternatives.size() != 0}">
					    <div class="aLittlePadded">
						<h:outputText styleClass="#{a.isRight()? 'altRight' : 'alt'}"
							      value="#{a.content}" />
					    </div>
					</p:dataList>
					<div class="somewhatPadded">
					    <h:commandButton action="#{newCat.removeQuestion(q)}"
							     styleClass="button" value="Remove question" />
					</div>
				    </p:column>
				</p:dataList>
			    </h:panelGroup>
			</div>
			<h:outputLabel value="Question title" /><br />
			<h:inputText id="questionTitle" styleClass="widthenedText" value="#{newCat.questionTitle}" /><br />
			<fieldset class="indented">
			    <legend><h4>Question alternatives</h4></legend>
			    <h:panelGroup id="addAlt">
				<ul>
				    <c:forEach var="a" items="#{newCat.alternatives}">
					<li>
					<h:outputText styleClass="#{a.isRight()? 'altRight' : 'alt'}"
						      value="#{a.content}" />
					</li>
				    </c:forEach>
				</ul>
				<h:outputLabel value="Alternative text" /><br />
				<h:inputText styleClass="widthenedText" value="#{newCat.content}" /><br />
				<h:selectBooleanCheckbox id="correctQuestionBox" value="#{newCat.correct}"/>
				<h:outputLabel value="This is the correct alternative" for="correctQuestionBox" />
				<br /><br />
				<p:commandButton styleClass="button" action="#{newCat.addAltToQ}"
						 ajax="true" update="addAlt"
						 value="Add alternative" />
				<div class="error">#{newCat.addAltError}</div>
			    </h:panelGroup>
			</fieldset><br />
			<h:outputLabel value="Add an image to the question (optional)" /><br />
			<h:panelGrid columns="2">
			    <p:fileUpload description="Images" allowTypes="*.jpg;*.png;*.gif;" id="fileUploader"
					  update="imageUploadPanel" auto="false"
					  fileUploadListener="#{fileUploadController.handleFileUpload}" />

			    <p:panel id="imageUploadPanel">
				<h:outputLabel value="Uploaded image will appear here"
					       rendered="#{newCat.questionImage == null}" />
				<h:graphicImage styleClass="uploadedImage" value="images/#{newCat.questionImage}"
						alt="Image uploaded"
						rendered="#{newCat.questionImage != null}"/>
				<br />
				<h:commandButton value="Remove image"
						 styleClass="button"
						 rendered="#{newCat.questionImage != null}"
						 action="#{newCat.removeQuestionImage}" />
			    </p:panel>
			</h:panelGrid>
			<br /><br />
			<p:commandButton styleClass="button" action="#{newCat.addQToCat}"
					 ajax="true"
					 update="questionsList addAlt questionTitle imageUploadPanel addQError"
					 value="Submit question" />
                        <div class="error"><h:outputText id="addQError" value="#{newCat.addQError}" /></div>
		    </h:panelGroup>
		</fieldset>

                <br />
                <h:selectBooleanCheckbox id="privateCategoryBox" value="#{newCat.pub}"/>
                <h:outputLabel value="Category should be accessable by everyone" for="privateCategoryBox" />
                <br /><br />
                <p:commandButton styleClass="button" action="#{newCat.saveCat}" value="Submit category"
				 ajax="true" update="addCatError" />
		<div class="error"><h:outputText id="addCatError" value="#{newCat.addCatError}" /></div>
            </div>
        </h:form>
    </ui:define>

</ui:composition>